<ng-template #template>
  <ng-container *ngIf="!element.hasTitleActions">
    <ng-container *ngTemplateOutlet="elementTitleContent"></ng-container>
  </ng-container>
  <ng-container *ngIf="element.hasTitleActions">
    <div class="sv-title-actions">
      <span class="sv-title-actions__title">
        <ng-container *ngTemplateOutlet="elementTitleContent"></ng-container>
      </span>
      <sv-ng-action-bar *ngIf="renderActions" [model]="element.getTitleToolbar()"></sv-ng-action-bar>
    </div>
  </ng-container>
  <ng-template #elementTitleContent>
    <sv-ng-string *ngIf="element.isTitleRenderedAsString" [model]="element.locRenderedTitle"></sv-ng-string>
    <ng-container *ngIf="!element.isTitleRenderedAsString">
      <span
        *ngIf="element.isRequireTextOnStart"
        [class]="element.cssRequiredMark"
        [attr.aria-hidden]="true"
        >{{ element.requiredMark }}</span>
      <span *ngIf="element.isRequireTextOnStart">&nbsp;</span>
      <span
        *ngIf="element.no"
        style="position: static"
        [class]="element.cssTitleNumber"
        [attr.aria-hidden]="true"
        >{{ element.no }}</span>
      <span *ngIf="element.no">&nbsp;</span>
      <span
        *ngIf="element.isRequireTextBeforeTitle"
        [class]="element.cssRequiredMark"
        [attr.aria-hidden]="true"
        >{{ element.requiredMark }}</span>
      <span *ngIf="element.isRequireTextBeforeTitle">&nbsp;</span>
      <sv-ng-string [model]="element.locRenderedTitle"></sv-ng-string>
      <span *ngIf="element.isRequireTextAfterTitle">&nbsp;</span>
      <span
        *ngIf=" element.isRequireTextAfterTitle"
        [class]="element.cssRequiredMark"
        [attr.aria-hidden]="true"
        >{{ element.requiredMark }}</span> 
  </ng-container>
  </ng-template>
</ng-template>